<template>
	<view class="container">

		<view class="card">
			<view class="card-header">
				<text class="card-title">📘{{ classTopic }}</text>
				<image class="share-btn" src="../../static/icon/share.png" mode="aspectFit" @click="onShare"></image>
			</view>
			<view class="divider" style="margin-bottom: 15rpx;"></view>


			<text class="card-line">⏰ <text class="card-label">上课时间：</text>{{ classTimeBegin }}</text>
			<view class="divider"></view>

			<text class="card-line">🧑‍🏫 <text class="card-label">任课老师：</text>{{ teacherName }}</text>
			<view class="divider"></view>

			<text class="card-line">
				👨‍🚀 <text class="card-label">学员宝贝：</text>
				{{ studentEnglishName }}
				<text class="cn-name">（{{ studentName }}）</text>
			</text>
			<view class="divider"></view>

			<text class="card-line">🎯 <text class="card-label">积分奖励：</text>{{ evaluation.classPoints }}</text>
			<view class="divider"></view>

			<view class="card-line">
				⭐ <text class="card-label">课堂评分：</text>
				<uni-rate :value="Number(evaluation.gradeDetermination)" :readonly="true" size="24" />
			</view>
			<view class="divider"></view>

			<text class="card-label">💬 教师评价：</text>
			<textarea class="card-textarea" disabled :value="evaluation.teacherEvaluation"></textarea>
			<view class="divider"></view>
			
			<text class="card-line" style="color: antiquewhite;">🎬 <text class="card-label">精彩瞬间：</text>可联系老师获取</text>
			<!--<text class="card-label">课堂回放</text>
			<video :src="imagePrefix + evaluation.videoUpload" controls
				style="width: 100%; height: 200px; border-radius: 12rpx;" /> -->
		</view>


	</view>
</template>

<script>
	import api from '@/api/api.js'
	import UniRate from '@/uni_modules/uni-rate/components/uni-rate/uni-rate.vue'

	export default {
		components: {
			UniRate
		},
		data() {
			return {
				studentEnglishName: null,
				studentName: null,
				studentId: null,
				classId: null,
				imagePrefix: uni.getStorageSync('requestPath') || "", // 动态获取前缀
				teacherName: null,
				classTimeBegin: null,
				classTimeEnd: null,
				classTopic: null,
				evaluation: {
					gradeDetermination: 0,
					classPoints: 0,
					teacherEvaluation: '',
					videoUpload: ''
				}
			}
		},
		onLoad(options) {
			this.studentEnglishName = options.studentEnglishName;
			this.studentName = options.studentName;
			this.studentId = options.studentId
			this.classId = options.classId
			this.teacherName = options.teacherName
			this.classTimeBegin = options.classTimeBegin
			this.classTimeEnd = options.classTimeEnd
			this.classTopic = options.classTopic
			this.fetchEvaluation()
		},
		methods: {
			fetchEvaluation() {
				api.getEvaluation({
					studentId: this.studentId,
					classId: this.classId
				}).then(res => {
					if (res && res.data) {
						this.evaluation = res.data
					}
				})
			},
			onShare() {
				api.getShareImage({
					studentId: this.studentId,
					classId: this.classId
				}).then(res => {
					if (res && res.data) {
						// 后端返回的相对路径，例如 /upload/xxx.png
						const posterPath = res.data.poster || res.data // 兼容后端两种返回
						const posterUrl = (posterPath.startsWith('http') ? posterPath : (this.imagePrefix +
							posterPath))

						// 带一些展示信息过去，海报页也可以用
						const query = encodeURIComponent(JSON.stringify({
							img: posterUrl,
							classTopic: this.classTopic,
							studentName: this.studentName,
							studentEnglishName: this.studentEnglishName,
							teacherName: this.teacherName,
							classTimeBegin: this.classTimeBegin,
							classId: this.classId,
							studentId: this.studentId
						}))

						uni.navigateTo({
							url: `/pages/growthReport/sharePoster?payload=${query}`
						})
					} else {
						uni.showToast({
							title: '未获取到海报',
							icon: 'none'
						})
					}
				}).catch(() => {
					uni.showToast({
						title: '生成海报失败',
						icon: 'none'
					})
				})
			}
		}
	}
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		padding: 0rpx 20rpx;
		background: linear-gradient(to bottom, #e6f4ea 0%, #fdfaf4 100%);
		min-height: 100vh;
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12rpx;
	}

	.card-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		width: 100%;
		text-align: center;
	}

	.share-btn {
		width: 50rpx;
		height: 50rpx;
		opacity: 0.8;
	}

	.share-btn:active {
		opacity: 1;
	}

	.card {
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.1);
		padding: 24rpx;
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}

	.card-line {
		font-size: 32rpx;
		color: #333;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.card-label {
		font-size: 26rpx;
		color: #666;
		margin-right: 8rpx;
	}

	.card-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
	}

	.card-textarea {
		width: 100%;
		min-height: 120rpx;
		font-size: 26rpx;
		color: #444;
		border: 1rpx solid #ddd;
		border-radius: 12rpx;
		padding: 12rpx;
		background-color: #f9f9f9;
		line-height: 1.5;
	}

	.cn-name {
		font-size: 24rpx;
		/* 比英文小 */
		color: #888;
		/* 灰一点，弱化显示 */
		margin-left: 6rpx;
	}

	.divider {
		height: 2rpx;
		background: #eee;
		margin: 12rpx 0;
	}

	.video-card {
		padding-bottom: 10rpx;
		margin-top: 20rpx;
	}
</style>